<template>
  <div class="coupon">
    <!-- 头部 -->
    <NavigationBar title="优惠券列表"></NavigationBar>
    <div class="main" v-if="couponList.length>0">
      {{ couponList }}
    </div>
    <van-empty
      v-else
      class="custom-image"
      image="https://files.roborock.com/mini_img/bonus/emptyBonus.png"
      description="您的优惠券中没有内容"
    />
    <div class="add-coupon">
      <van-button round size="large" type="info" @click="show=true">添加优惠券</van-button>
    </div>
    <van-dialog v-model="show" title="添加优惠券" show-cancel-button @confirm="confirm">
      <van-field class="code" v-model="value" placeholder="请输优惠券码"/>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: "Coupon",
  data() {
    return {
      value: "",
      show: false,
      couponList: []
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    confirm() {
      this.$ajax.addCoupon({
        bonus_sn: this.value
      }).then(res => {
        if (res.error_code !== 0) {
          this.$toast(res.error_desc)
        } else {
          this.$toast("添加成功")
          this.getCouponList()
        }
      })
    },
    getCouponList(pege = 1) {
      this.$ajax.couponList({
        page: pege,
        per_page: 10,
        status: 0
      }).then(res => {
        if (res.error_code === 0) {
          this.couponList = res.cashgifts
        } else {
          this.$toast(res.error_desc)
        }
        // console.log(res.cashgifts)
      })
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.getCouponList()
  }
}
</script>

<style lang="scss" scoped>
.coupon {
  ::v-deep.custom-image .van-empty__image {
    margin-top: 100px;
    width: 93px;
    height: 93px;
  }

  .add-coupon {
    position: fixed;
    padding: 20px 42px 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;

    .van-button--info {
      background: linear-gradient(270deg, #3777f7, #72b4fe);
      height: 40px;
    }
  }

  .code {
    width: auto;
    margin: 20px;
  }
}
</style>